import React, { useState } from 'react';
import { AreaChartOutlined } from '@ant-design/icons';
import AutoTable from '@/components/AutoTable';
import moment from 'moment';
import IconFont from '@/components/IconFont';
import AutoTables from '@/components/AutoTable/mtable';
import ProDescriptions from '@ant-design/pro-descriptions';
import { DatePicker, Modal, Image } from 'antd';
const { MonthPicker } = DatePicker,
  deviceState = {
    0: '离线',
    1: '在线',
  };

function Camera() {
  let columnes = [
    {
      title: `设备ID码`,
      dataIndex: 'devId',
      key: 'devId',
      search: false,
    },
    {
      title: '设备SN码',
      dataIndex: 'snCode',
      key: 'snCode',
      search: false,
    },
    {
      title: '设备位置',
      dataIndex: 'liftAddress',
      key: 'liftAddress',
      search: false,
    },
    {
      title: '型号规格',
      dataIndex: 'modelType',
      key: 'modelType',
      search: false,
      width: 100,
    },
    {
      title: '在线状态',
      dataIndex: 'deviceState',
      key: 'deviceState',
      search: false,
      render: (_, row) => <span>{deviceState[row.deviceState]}</span>,
      width: 100,
    },
    {
      title: '安装时间',
      dataIndex: 'createTime',
      key: 'createTime',
      search: false,
    },
    {
      "title": "查看",
      "valueType": "option",
      "width": 88,
      "render": (_, row) => {
        return <b style={{ color: "aqua", cursor: "pointer" }} onClick={() => {
          Modal.info({
            title: "报警列表",
            width: 1200,
            okText: "知道了",
            style: { top: 12 },
            content: <>
              <ProDescriptions
                style={{ marginTop: 12 }}
                column={1}
                dataSource={row}
                columns={[
                  {
                    title: '设备SN码',
                    dataIndex: 'snCode',
                    key: 'snCode',
                    search: false,
                  },
                  {
                    title: '设备位置',
                    dataIndex: 'liftAddress',
                    key: 'liftAddress',
                    search: false,
                  }
                ]}
              />

              <AutoTables
                columns={
                  [
                    {
                      "title": "相机SN码",
                      "dataIndex": "snCode",
                      "key": "snCode",
                      search: false
                    },
                    {
                      "title": "关门事件",
                      "dataIndex": "doorOpen",
                      "key": "doorOpen",
                      search: false,
                      render: (_, row) => {
                        return <span>{row.doorOpen == 0 ? "关闭" : row.doorOpen == 1 ? "打开" : ""}</span>
                      }
                    },
                    {
                      "title": "人数",
                      "dataIndex": "personCount",
                      "key": "personCount",
                      search: false
                    },
                    {
                      "title": "创建时间",
                      "dataIndex": "createTime",
                      "key": "createTime",
                      search: false
                    },
                    {
                      "title": "报警事件",
                      "dataIndex": "eventName",
                      "key": "eventName",
                      search: false,
                      render: () => <span>电动车入梯</span>
                    },
                    {
                      "title": "报警图片",
                      "dataIndex": "imgUrl",
                      "key": "imgUrl",
                      render: (text, row) => {
                        return <Image style={{ width: 80, height: 60 }} src={row?.imgUrl} />
                      }
                    }
                  ]
                }
                path="/vehicle-api/lift/monitor_list"
                extraparams={{
                  sn_code: row.snCode
                }}
                format="data"
              />

            </>
          })
        }}>
          报警列表
        </b>
      }
    }
  ];

  return (
    <div>
      <p
        className="title"
        style={{ marginBottom: 0, display: 'flex', justifyContent: 'space-between', padding: 0 }}
      >
        <span>
          <IconFont type="icon-shexiangtou" style={{ paddingRight: 6 }} />
          摄像头管理
        </span>
      </p>
      <AutoTable
        path="/vehicle-api/lift/camera_list"
        rowClassName={(record, index) => {
          let className = index % 2 ? 'shallow_gray' : 'deep_gray';
          return className;
        }}
        columns={columnes}
        bordered={false}
        withCard={false}
        style={{ height: 'auto' }}
        onlyTable={true}
        format={'data'}
      />
    </div>
  );
}

export default Camera;
